<template>
  <div class="setting-container">
    <a-dropdown placement="bottom">
      <SvgIcon name="header-translate" :color="fontColor"></SvgIcon>
      <template #overlay>
        <a-menu>
          <a-menu-item key="1" disabled>
            {{ curLanguage === "zh-cn" ? "简体中文" : "English" }}
          </a-menu-item>
          <a-menu-item key="2" @click="onChangeLocale">
            {{ curLanguage === "zh-cn" ? "English" : "简体中文" }}
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <a-tooltip>
      <template #title>菜单搜索</template>
      <SvgIcon
        name="header-magnify"
        @click="onSearchMenu"
        :color="fontColor"
      ></SvgIcon>
    </a-tooltip>
    <a-popover>
      <template #content>
        <a-tabs activeKey="1">
          <a-tab-pane key="1" tab="通知">
            开源地址：
            <a
              target="_blank"
              href="https://gitee.com/huang_siting/vite-project"
              >点我</a
            >
          </a-tab-pane>
        </a-tabs>
      </template>
      <a-badge count="5" :offset="[-3, 3]">
        <SvgIcon name="header-bell" :color="fontColor"></SvgIcon>
      </a-badge>
    </a-popover>
    <a-tooltip>
      <template #title>全屏</template>
      <SvgIcon
        name="header-fullscreen"
        @click="onFullScreen"
        :color="fontColor"
      ></SvgIcon>
    </a-tooltip>
    <a-tooltip>
      <template #title>设置</template>
      <SvgIcon
        name="header-setting"
        @click="onToggleDrawer"
        :color="fontColor"
      ></SvgIcon>
    </a-tooltip>
    <UserSetting />
  </div>
  <MenuSearch :visible="menuSearchShow" @update:visible="onSearchMenu" />
  <Drawer @update:visible="onToggleDrawer" :visible="drawerVisible" />
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import * as util from "@/util/util";
import { useLayoutStore } from "@/store/modules/Layout";
import SvgIcon from "@/components/SvgIcon/index.vue";
import MenuSearch from "../../components/navSetting/MenuSearch.vue";
import Drawer from "@/components/drawer/index.vue";
import UserSetting from "../../components/navSetting/UserSetting.vue";
import { useGlobalStore } from "@/store/index";

const menuSearchShow = ref(false);
const curLanguage = ref("zh-cn");
const { locale } = useI18n();
let showBread = ref<boolean>(true);
const drawerVisible = ref(false);
const layoutStore = useLayoutStore();
const globalStore = useGlobalStore();

const onToggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value;
};
const onChangeLocale = () => {
  curLanguage.value = curLanguage.value === "zh-cn" ? "en" : "zh-cn";
  locale.value = curLanguage.value;
};
const onSearchMenu = () => {
  menuSearchShow.value = !menuSearchShow.value;
};
const onFullScreen = () => {
  util.fullScreen(document.body);
};
const resize = () => {
  if (window.innerWidth < 640) {
    showBread.value = false;
  } else {
    showBread.value = true;
  }
};

const fontColor = ref(
  layoutStore.$state.themeType === "default" ? "#000" : "#fff"
);
watch(
  () => layoutStore.$state.themeType,
  (newVal) => {
    fontColor.value = newVal === "default" ? "#000" : "#fff";
  }
);
watch(
  () => globalStore.$state.settingVisible,
  (newVal) => {
    if (newVal) {
      globalStore.setSettingVisible(false);
      onToggleDrawer();
    }
  }
);
onMounted(() => {
  resize();
  window.addEventListener("resize", resize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.setting-container {
  margin: 0 12px;
  display: flex;
  align-items: center;

  .my-svg {
    margin-right: 8px;

    &:hover {
      cursor: pointer;
    }
  }
}
</style>
